<div id="<?php echo $uniqid;?>" style="padding:5px">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable">
        <tr bgcolor="#FFFFFF">
            <td  class="tlabel">请选择目录：</td>
            <td>
                <select v-model="firstLevel" style="height: 300px" @change="showUpper(1)" class="forminput inputstyle textbox-text validatebox-text" size="20">
                    <template v-for="(vo,index) in mainCata">
                        <option :value="vo.id">{{vo.name}}</option>
                    </template>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <select id="secondLevel" style="height: 300px" @change="showUpper(2)" class="forminput inputstyle textbox-text validatebox-text" size="20">
                    <template v-for="(vo,index) in mainCata" v-if="vo.id==firstLevel">
                        <template v-for="(vo1,idx1) in vo.children">
                            <option :value="vo1.id">{{vo1.name}}</option>
                        </template>
                    </template>
                </select>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >上级目录：</td>
            <td>
                {{upper}}
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >名称：</td>
            <td><input type="text"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入姓名.."  v-model="params.name">
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td class="tlabel" >排序：</td>
            <td><input name="sortorder" type="text"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="请输入排序.." v-model="params.sortorder"></td>
        </tr>
    </table>
</div>
<script>
    var catalogaddVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            firstLevel: 0,
            secondLevel: 0,
            upper: '',
            params: {
                up: '',
                name: '',
                sortorder: 500,
            },
            mainCata: JSON.parse("<?php echo addslashes(json_encode($mainCata));?>"),
        },
        methods: {
            init: function () {},
            showUpper: function (level) {
                let upp = [];
                if(level==1){
                    catalogaddVm.secondLevel = 0;
                }else{
                    catalogaddVm.secondLevel = $('#secondLevel').val();
                }
                if(catalogaddVm.secondLevel==0){
                    catalogaddVm.mainCata.forEach(function(item, index){
                        if(item.id==catalogaddVm.firstLevel){
                            upp.push(item.name);
                        }
                    });
                }else{
                    catalogaddVm.mainCata.forEach(function(item, index){
                        if(item.id==catalogaddVm.firstLevel){
                            upp.push(item.name);
                            item.children.forEach(function(itm, index) {
                                if (itm.id == catalogaddVm.secondLevel) {
                                    upp.push(itm.name);
                                }
                            });
                        }
                    });
                }
                catalogaddVm.upper = upp.join(' > ');
            }
        }
    });
    catalogaddVm.init();
    $(function () {
        $('#catalogaddsubmit').click(function () {
            if(catalogaddVm.hasAct) {
                catalogaddVm.params.actions = getTreeChecked('#catalogaddAct');
            }
            $.post('/admin/system/catalogadd', catalogaddVm.params, function (data) {
                if (data.ret == 0) {
                    $.messager.show({
                        title: '提示',
                        msg: data.msg,
                        timeout: 3000,
                        showType: 'slide'
                    });
                    $('#catalogaddfm').form('clear');
                    $('#rightTabs').tabs('close', '新增后台菜单');
                    if (typeof admincatalogReload == "function") {
                        admincatalogReload();
                    }
                } else {
                    $.messager.alert('提示', data.msg, 'warning');
                }
            }, 'json');
        });
        $('#catalogaddclearForm').click(function () {
            $('#catalogaddfm').form('clear');
            $('#rightTabs').tabs('close', '新增后台菜单');
        });
    });
</script>
